<template>
  <div class="singlegroup" v-if="singlegroup">

      <div class="loading" v-if="loading">
      Loading...
    </div>

    <div v-if="error" class="error">
      {{ error }}
    </div>
    <div v-if="hasp" id="previewArea" >
<img alt="" src="http://www.polyv.net/uploads/allimg/130911/1-13091110350RR.png" />
      <!-- <span id="contentSpan">等待事件..</span> -->
    </div>
    <!-- <p>{{ singlegroup.body.knowledgeGroupList.knowledgeList"}}</p> -->
    <img v-if="!hasp" :src="cover" width="100%" alt="">
    <span id="buylink" style="display:none"><a href="http://www.polyv.net/pricing.html" target="_blank"><img alt="" src="http://www.polyv.net/uploads/allimg/130911/1-13091110350RR.png" /></a></span>
   <!-- <div v&#45;if="hasp" class="noclick"><div   id="plv_02bfeb00e2ba940698c54cdf517aa9b6_0"></div></div> -->
   <!-- <h1>{{gettingVideoNo}}</h1> -->
   <!-- <p v&#45;if="singlegroup" >{{ singlegroup.body.purchased}}22222</p> -->
   <!-- <p  v&#45;if="singlegroup">{ singlegroup.body.knowledgeGroupList[0].purchased}}22222</p> -->
<div>
       <tab :line-width=2 active-color='#fc378c' v-model="index">
      <tab-item class="vux-center" @click="doit()" :key="index">简介</tab-item>
      <tab-item class="vux-center" @click="doit()" :key="index">目录</tab-item>
        <!-- <tab&#45;item class="vux&#45;center" :selected="demo2 === item" v&#45;for="(item, index) in list2" :key="index">     godoit{{item}}</tab&#45;item> -->
      </tab>
      <swiper v-model="index" height="100px" :show-dots="false">
        <!-- <swiper&#45;item v&#45;for="(item, index) in list2" :key="index"> -->
        <!--   <div class="tab&#45;swiper vux&#45;center">{{item}} -->
        <!--  -->
        <!--       <p>  no brought </p> -->
        <!--  -->
        <!--   </div> -->
        <!-- </swiper&#45;item> -->
         <swiper-item :key="index">
          <div class="tab-swiper vux-center">
            <card v-if="singlegroup.body"  v-for="v in singlegroup.body.knowledgeGroupList">
            <div slot="content" class="card-padding">
              <p style="color:#999;font-size:12px;">{{v.intro}}</p>
              <flexbox>
              <flexbox-item>{{v.title}}</flexbox-item>
              <flexbox-item>{{v.buyReward}}</flexbox-item>
              </flexbox>
            </div>
            </card>
            <cell :link="{path:'/'}" title='本章介绍'>
            </cell>
            <cell @click.native="goBuy()" title='购买'>
            </cell>
          </div>
        </swiper-item><swiper-item :key="index">
          <div class="tab-swiper vux-center">

   <!-- <p >{{ singlegroup.body.knowledgeGroupList[0].knowledgeList}}111111</p> -->
<cell v-for="i in singlegroup.body.knowledgeGroupList[0].knowledgeList"  :title='i.title'> </cell>


          </div>
        </swiper-item>
      </swiper>
    </div>
<!-- all_restful_videoNo -->
   </p>
  </div>
</template>
<style lang="less" >
@import '~vux/src/styles/reset.less';
@import '~vux/src/styles/1px.less';
@import '~vux/src/styles/tap.less';
.vux-swiper{min-height:400px}
.singlegroup 	{

}
</style>
<script>
import {Flexbox, FlexboxItem, Swiper,SwiperItem, Card, Cell, XButton, TransferDom,Tab, TabItem} from 'vux'


export default {
  data () {
    return {
    // singlegroup:false,
      index:0,
      cover:'../assets/banner1.png',
          tprice:"",
    isActive:false,
      loading:false,
      error: null,
      GroupOrderPayload:{
          key:'videoNo',
          url:'baseapi',
          actionName:"CreateKnowledgeGroupOrder",
          postData: {
              "knowledgeGroupIds":[],

          }
      },
      brought: {
        actionName:'QueryHaveBoughtKnowledgeGroup',
        url: 'baseapi',
         postData: {
           'type':'2', //类型1.文字课程，2.查询学习计划（为空时查询全部）
           'tagId':'XXJH' //标签ID
         }
      }
    }
  },
  methods: {
    goBuy(){
      this.$store.commit("restful_api",this.GroupOrderPayload)
      console.info(this.gettingVideoNo,  99999999999);
   if (this.gettingVideoNo) {

      console.info(this.gettingVideoNo,  99999999999);
      this.$router.push('/Zzpage/' + this.gettingVideoNo + '/1234/' +this.tprice)
   }

    },
    doThis (event) {
      event.preventDefault()
      console.log(3434)
    },
    qbrought(){
      this.$store.commit('restful_api',this.brought)
    },

  },
  created () {
    // if(singlegroup !== ""){
var cid = this.$route.params.courseid;
this.GroupOrderPayload.postData.knowledgeGroupIds.push(cid)
    // }
     // window.j2s_stopVideo = function (){ alert(55) };
    window.s2j_onVideoPlay = function()
    {
      if(this.islogined !== true || this.purchased == false) {
        this.$vux.alert.show({ title:"sakkA", content:'brought?'+ this.purchased }) // this.$router.push('/login')
        window.player.j2s_stopVideo()
        }
    }.bind(this);
    setTimeout(function () {
      // this.qbrought()
      window.player = polyvObject('#previewArea').previewPlayer({
          'width': '100vw',
          'height':'340', // 'vid': myxx// this.evideoid // 'vid':  this.trydeco
        'vid':  this.evideoid
      });
    }.bind(this),1000)
  },
  directives: { TransferDom },
  components: { Flexbox, FlexboxItem, Swiper,  SwiperItem, Card, Cell, XButton, Tab, TabItem // 'player':Player
  },
  beforeDestory () {

  },
  watch: {
  },
  computed: {
    hasp(){
var xx = this.singlegroup.body.knowledgeGroupList[0].purchased
if(xx == true) return true
else return false
    },
    gettingVideoNo(){
      var x = this.$store.getters.all_restful_videoNo
      if (x) {
    this.tprice = x.body.totalPrice
        return x.body.orderNo
      }
    },
    islogined () {
      return this.$store.getters.all_islogoined
    },
    trydeco () {

   return       this.Encode("lpmkenjibhuvgycftxdrzsoawq0126783459",this.evideoid)
    },

   purchased(){
     var  xxd = this.$store.getters.all_singlegroup
     var xxd = this.$store.getters.all_singlegroup.body.knowledgeGroupList[0].knowledgeList[0].purchased
      if(xxd)
      {
        return   dataval
      } else {
        return false
      }
      // let me = this.$store.getters.all_singlegroup.body.knowledgeGroupList[0].knowledgeList[0].videoID;
    // return  this.Encode('lpmkenjibhuvgycftxdrzsoawq0126783459',xx)
    },
    evideoid(){
     var xxx =  this.$store.getters.all_singlegroup
      if(xxx)
      {
        return xxx.body.knowledgeGroupList[0].knowledgeList[0].videoID

      }
      // let me = this.$store.getters.all_singlegroup.body.knowledgeGroupList[0].knowledgeList[0].videoID;
    // return  this.Encode('lpmkenjibhuvgycftxdrzsoawq0126783459',xx)
    },
    singlegroup(){
      var i =  this.$store.getters.all_singlegroup
      if(i){
        this.cover = i.body.knowledgeGroupList[0].cover
        return this.$store.getters.all_singlegroup
      }
    }
  },
  mounted () {
     this.$nextTick(function(){
  Event.listen("singlegroup",(e) =>{
         this.$vux.alert.show({
          title: '',
          content: this.$t(e),
          onShow () {
      console.log('Plugin: I\'m showing')
          },
          onHide () {
      console.log('Plugin: I\'m hiding  now')
          }
      })

  })
     })
     this.handler = () => {
       if(this.path ==='/singlegroup') {
        console.log("singlegroup")
       }
     }
  }
}
</script>
